﻿<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <#include "../common/header.ftl"/>
    <script src="/js/plugins/My97DatePicker/WdatePicker.js"></script>
    <script src="/page-js/customer-list.js"></script>
</head>
<body>

<div class="container-fluid " style="margin-top: 20px">
    <#include "../common/top.ftl"/>

    <div class="row">
        <div class="col-lg-2">
            <#assign menu="customer"/>
            <#--左侧菜单-->
            <#include "../common/menu.ftl"/>
        </div>
        <div class="col-lg-10">
            <div class="row">
                <div class="col-lg-12">
                    <h1 class="page-head-line">客户信息管理（非正式客户）</h1>
                </div>
            </div>
            <div style="margin-bottom: 10px">
                <a role="button" class="btn btn-success inputBtn">
                    <span class="glyphicon glyphicon-plus"></span> 添加
                </a>
                <a id="export" href="#" class="btn btn-success">
                    <span class="glyphicon glyphicon-export"></span> 导出
                </a>
                <a id="import_btn" class="btn btn-success btn-import">
                    <span class="glyphicon glyphicon-import"></span> 导入
                </a>
                <br>
            </div>
            <#-- 高级查询 -->
            <form class="form-inline" id="searchForm" action="/customer/list.do?source=0" method="post">
                <input type="hidden" name="currentPage" id="currentPage" value="1">
                <input type="hidden" name="pageSize" id="pageSize" value="20">
                <div class="form-group">
                    <label>关键字:</label>
                    <input type="text" class="form-control" name="keyword"
                           value="${(qo.keyword)!}" placeholder="请输入姓名/电话">
                </div>
                <div class="form-group">
                    <label for="dept">年份:</label>
                    <select class="form-control" id="year" name="year">
                        <option value="-1">全部</option>
                        <#list currentYear..2019 as entity>
                            <option value="${(entity?c)!}">${(entity?c)!}年</option>
                        </#list>
                    </select>
                <#--回显年份-->
                    <script>
                        $("#year").val(${(qo.year?c)!});
                    </script>
                </div>
                <div class="form-group">
                    <label for="dept">月份:</label>
                    <select class="form-control" id="month" name="month">
                        <option value="-1">全部</option>
                        <#list 1..12 as entity>
                            <option name="${entity!}" value="${(entity)!}">${(entity)!}月</option>
                        </#list>
                    </select>
                <#--回显月份-->
                    <script>

                        $(function () {
                            //月份合理化处理，删除未到达时间的月份
                            var options = $("#month option");//保存所有月份 1-12
                            var currentYear = "${currentYear?c!}";
                            var currentMonth = "${currentMonth?c!}";
                            //页面加载完毕执行一次
                            removeMonthByYear();
                            $("#year").change(function () {
                                //值改变后执行一次
                                removeMonthByYear();
                            });
                            //页面加载完，如果当前选中的年份为全部或当前年，则删除相应月份
                            function removeMonthByYear() {
                                var selectedYear = $("#year").val();
                                if(selectedYear == -1){
                                    removeMonthOption(1);
                                }else if(selectedYear == currentYear){
                                    //先添加所有然后在删除
                                    $("#month").append(options);
                                    var m = parseInt(currentMonth) + 1;
                                    removeMonthOption(m);
                                }else{
                                    //删除素有option然后再添加回来
                                    $("#month option").remove();
                                    $("#month").append(options);
                                    $("#month").val(-1);
                                }
                            }
                            //删除指定范围的月份
                            function removeMonthOption(month) {
                                for(var i = month; i <= 12; i++){
                                    $("#month option[name='" + i + "']").remove();
                                }
                                $("#month").val(-1);
                            }
                            $("#month").val(${(qo.month?c)!});
                        });
                    </script>
                </div>

                <div class="form-group">
                    <label for="dept">状态:</label>
                    <select class="form-control" id="status" name="cusStatus">
                        <option value="-1">全部</option>
                        <option value="0">潜在客户</option>
                        <option value="1">开发失败</option>
                        <option value="2">重点关注</option>
                    </select>
                    <#--回显客户状态-->
                    <script>
                        $("#status").val(${(cusStatus)!});
                    </script>
                </div>
                <button type="submit" class="btn btn-primary">
                    <span class="glyphicon glyphicon-search"></span> 查询
                </button>
            </form>

            <table class="table table-striped table-hover" >
                <tr>
                    <th>编号</th>
                    <th>时间</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>年龄</th>
                    <th>电话</th>
                    <th>家庭职业</th>
                    <th>意向课程</th>
                    <th>来源</th>
                    <th>营销人员</th>
                    <th>状态</th>
                    <th>备注</th>
                    <th>操作</th>
                </tr>
                <#-- Freemark指令做循环迭代 -->
                <#list ro.list as entity>
                    <tr>
                        <td>${(entity_index + 1)!}</td>
                        <td>${(entity.inputTime?string("yyyy/MM/dd"))!}</td>
                        <td>${(entity.name)!}</td>
                        <td>${(entity.genderName)!}</td>
                        <td>${(entity.age)!}</td>
                        <td>${(entity.tel)!}</td>
                        <td>${(entity.job)!}</td>
                        <td>${(entity.curriculum.title)!}</td>
                        <td>${(entity.source.title)!}</td>
                        <td>${(entity.seller.name)!}</td>
                        <td>${(entity.statusName)!}</td>
                        <td>${(entity.remark)!}</td>
                        <td>
                            <a role="button" class="btn btn-info btn-xs inputBtn" data-json='${(entity.json)!}'>
                                <span class="glyphicon glyphicon-pencil"></span> 编辑
                            </a>
                            <a role="button" class="btn btn-primary btn-xs traceBtn" data-json='${(entity.json)!}'>
                                <span class="glyphicon glyphicon-tag"></span> 跟进
                            </a>
                            <@shiro.hasAnyRoles name="admin,客户经理">
                                <a role="button" class="btn btn-warning btn-xs transferBtn" data-json='${(entity.json)!}'>
                                    <span class="glyphicon glyphicon-transfer"></span> 移交
                                </a>
                            </@shiro.hasAnyRoles>
                            <a role="button" class="btn btn-success btn-xs changeStatusBtn" data-json='${(entity.json)!}'>
                                <span class="glyphicon glyphicon-plane"></span> 修改状态
                            </a>
                        </td>
                    </tr>
                </#list>
            </table>

            <#--分页-->
            <#include "../common/page.ftl" />
        </div>
        <#--ajax导出数据的iframe-->
        <iframe name="exportTarget" id="exportTarget" style="display:none;"></iframe>
    </div>
</div>

<#-- 编辑客户模态框 -->
<div class="modal fade" id="customerModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">编辑/修改客户信息</h4>
            </div>
            <div class="modal-body">
                <!--填充编辑界面-->
                <form class="form-horizontal" action="/customer/saveOrUpdate.do" method="post" id="editForm">
                    <input type="hidden" name="id"/>
                    <div class="form-group" >
                        <label class="col-lg-4 control-label">姓名：</label>
                        <div class="col-lg-6">
                            <input type="text" class="form-control" name="name" placeholder="请输入客户/学生姓名"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-4 control-label">年龄：</label>
                        <div class="col-lg-6">
                            <input type="number" class="form-control" name="age" placeholder="请输入客户/学生年龄"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-4 control-label">性别：</label>
                        <div class="col-lg-6">
                            <select class="form-control" name="gender">
                                <option value="1">男</option>
                                <option value="0">女</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-4 control-label">电话：</label>
                        <div class="col-lg-6">
                            <input type="text" class="form-control" name="tel" placeholder="请输入客户电话"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-4 control-label">职业：</label>
                        <div class="col-lg-6">
                            <input type="text" class="form-control"name="job" placeholder="请输入客户的家庭职业"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-4 control-label">意向课程：</label>
                        <div class="col-lg-6">
                            <select class="form-control" name="curriculum.id">
                                <#list curriculums as curriculum>
                                    <option value="${(curriculum.id)!}">${(curriculum.title)!}</option>
                                </#list>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-4 control-label">来源：</label>
                        <div class="col-lg-6">
                            <select class="form-control" name="source.id">
                                <#list sources as s>
                                    <option value="${(s.id)!}">${(s.title)!}</option>
                                </#list>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-4 control-label">备注：</label>
                        <div class="col-lg-6">
                            <textarea type="text" class="form-control" name="remark"></textarea>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary customerSubmitBtn">保存</button>
            </div>
        </div>
    </div>
</div>

<#-- 跟进历史 -->
<div class="modal fade" id="traceModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">添加跟进记录</h4>
            </div>
            <div class="modal-body">
                <!--填充编辑界面-->
                <form class="form-horizontal" action="/customerTraceHistory/saveOrUpdate.do" method="post" id="traceForm">
                    <input type="hidden" name="customer.id"/>
                    <input type="hidden" name="inputTime"/>
                    <div class="form-group" >
                        <label class="col-lg-4 control-label">客户姓名：</label>
                        <div class="col-lg-6">
                            <input type="text" class="form-control" id="customerName" readonly/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-4 control-label">跟进时间：</label>
                        <div class="col-lg-6">
                            <input type="text" class="form-control" name="traceTime"
                                   placeholder="请输入跟进时间"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-4 control-label">跟进记录：</label>
                        <div class="col-lg-6">
                            <input type="text" class="form-control" name="traceDetails"
                                   placeholder="请输入跟进记录"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-4 control-label">交流方式：</label>
                        <div class="col-lg-6">
                            <select class="form-control" name="traceType.id">
                                <#list types as t>
                                    <option value="${(t.id)!}">${(t.title)!}</option>
                                </#list>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-4 control-label">跟进效果：</label>
                        <div class="col-lg-6">
                            <select class="form-control" name="traceResult">
                                <option value="1">优</option>
                                <option value="2">中</option>
                                <option value="3">差</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-4 control-label">备注：</label>
                        <div class="col-lg-6">
                            <textarea type="text" class="form-control" name="remark"></textarea>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary traceSubmitBtn">保存</button>
            </div>
        </div>
    </div>
</div>

<#-- 客户移交 -->
<div class="modal fade" id="transferModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">客户移交</h4>
            </div>
            <div class="modal-body">
                <!--填充编辑界面-->
                <form class="form-horizontal" action="/customerTransferHistory/save.do" method="post" id="transferForm">
                    <input type="hidden" name="customer.id"/>
                    <input id="oldSeller_id" type="hidden" name="oldSeller.id"/>
                    <div class="form-group" >
                        <label class="col-lg-4 control-label">客户姓名：</label>
                        <div class="col-lg-6">
                            <input type="text" class="form-control" id="cname" readonly/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-4 control-label">旧营销人员：</label>
                        <div class="col-lg-6">
                            <input type="text" class="form-control" id="oldSeller" readonly/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-4 control-label">新营销人员：</label>
                        <div class="col-lg-6">
                            <#--新营销人员列表-->
                            <select id="oldSeller_select" class="form-control" name="newSeller.id">
                                <#list (newSellers)! as emp>
                                    <option name="${(emp.id)!}" value="${(emp.id)!}">${(emp.name)!}</option>
                                </#list>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-4 control-label">移交原因：</label>
                        <div class="col-lg-6">
                            <textarea type="text" class="form-control" name="reason" cols="10"></textarea>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary transferSubmitBtn">保存</button>
            </div>
        </div>
    </div>
</div>

<#-- 修改客户状态 -->
<div class="modal fade" id="statusModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">修改客户状态</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" action="/customer/updateStatus.do" method="post" id="statusForm">
                    <input type="hidden" name="id" />
                    <div class="form-group" >
                        <label class="col-lg-4 control-label">客户姓名：</label>
                        <div class="col-lg-6">
                            <input type="text" class="form-control" id="name" readonly/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-4 control-label">客户状态：</label>
                        <div class="col-lg-6">
                            <select class="form-control" name="status">
                                <option value="0">潜在客户</option>
                                <option value="1">开发失败</option>
                                <option value="2">重点关注</option>
                                <option value="3">移入客户池</option>
                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary statusSubmitBtn">保存</button>
            </div>
        </div>
    </div>
</div>

<!-- 导入客户信息Modal -->
<div class="modal fade" id="importModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">批量导入客户数据</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" action="/customer/import.do" method="post" id="importForm" enctype="multipart/form-data">
                    <div class="form-group" >
                        <label class="col-lg-3 control-label">导入的文件：</label>
                        <div class="col-lg-6">
                            <input type="file" class="form-control" name="xls">
                        </div>
                    </div>

                    <a href="/template/客户信息导入模板.xls" class="btn btn-success text-center">
                        <span class="glyphicon glyphicon-download"></span> 下载excel导入模板
                    </a>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button id="import_submit" type="button" class="btn btn-primary btn-submit">提交</button>
            </div>
        </div>
    </div>
</div>

</body>
</html>